<template>
  <view class="video-view">
    <video
    :picture-in-picture-mode="['push', 'pop']"
    show-snapshot-button
    :custom-cache="false"
    :muted="false"
    show-mute-btn
    :style="{
        'width': width.indexOf('%') != -1 ? width : (width + 'rpx'),
        '--video-width': width.indexOf('%') != -1 ? width : (width + 'rpx'),
        'height': height + 'rpx',
        '--video-height': height + 'rpx',
        'border-radius': borderRadius + 'rpx',
        '--video-border-radius': borderRadius + 'rpx',
    }"
      @click.stop="()=>{}"
      :src="src"
      @waiting="handleBindwaiting"
      @loadedmetadata="handleBindloadedmetadata"
      @error="handleBinderror"
    ></video>
        <u-toast ref="uToast" />
  </view>
</template>

<script>
import log from "@/utils/log.js"

export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    width: {
      type: [String, Number],
      default: '320',
    },
    height: {
      type: [String, Number],
      default: '180',
    },
    borderRadius: {
      type: [String, Number],
      default: '16',
    },
  },
  data() {
    return {
      loading: true
    }
  },
  watch: {
    src(val1, val2) {
      if (val1 != val2) {
           this.loading = true
      }
    },
  },
  methods: {
    handleBindwaiting(event) {
      if (this.loading) {
              setTimeout(() => {
             this.showTip()
          }, 3000);
      }

    },
    handleBinderror(event) {
        log.setFilterMsg('视频播放出错')
        log.info('url', this.src, event)
    },
    handleBindloadedmetadata(event) {
      this.loading = false
    },
    showTip() {
      if (this.loading) {
        // 提示
        this.$refs.uToast.show({
            title: '当前网络不佳，请尝试连接WIFI',
            type: 'warning',
            duration: 2000,
          })
        log.setFilterMsg('视频播放卡顿')
        log.info('url', this.src)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
video {
  width: var(--video-width);
  height: var(--video-height);
  border-radius: var(--video-border-radius);
  background-color: var(--color);
}
</style>
